/* 字体大小 12 ~ 100 */
@for $i from 12 through 100 {
  .fs-#{$i} {
    font-size: #{$i}px;
  }
}

/* 宽高 1 ~ 1000 */
@for $i from 1 through 1000 {
  .w-#{$i} {
    width: #{$i}px;
  }
  .h-#{$i} {
    height: #{$i}px;
  }
}

/* 百分比宽高 */
@for $i from 1 through 100 {
  .per-w-#{$i} {
    width: #{$i} + "%";
  }
  .per-h-#{$i} {
    height: #{$i} + "%";
  }
}

/* 内边距 2 ~ 200 */
@for $i from 2 through 200 {
  .pd-#{$i} {
    padding: #{$i}px;
    box-sizing: border-box;
  }

  .pd-x-#{$i} {
    padding-left: #{$i}px;
    padding-right: #{$i}px;
    box-sizing: border-box;
  }

  .pd-y-#{$i} {
    padding-top: #{$i}px;
    padding-bottom: #{$i}px;
    box-sizing: border-box;
  }

  .pd-l-#{$i} {
    padding-left: #{$i}px;
    box-sizing: border-box;
  }

  .pd-r-#{$i} {
    padding-right: #{$i}px;
    box-sizing: border-box;
  }

  .pd-t-#{$i} {
    padding-top: #{$i}px;
    box-sizing: border-box;
  }

  .pd-b-#{$i} {
    padding-bottom: #{$i}px;
    box-sizing: border-box;
  }
}

/* 外边距 2 ~ 200 */
@for $i from 2 through 200 {
  .mg-#{$i} {
    margin: #{$i}px;
    box-sizing: border-box;
  }

  .mg-x-#{$i} {
    margin-left: #{$i}px;
    margin-right: #{$i}px;
    box-sizing: border-box;
  }

  .mg-y-#{$i} {
    margin-top: #{$i}px;
    margin-bottom: #{$i}px;
    box-sizing: border-box;
  }

  .mg-l-#{$i} {
    margin-left: #{$i}px;
    box-sizing: border-box;
  }

  .mg-r-#{$i} {
    margin-right: #{$i}px;
    box-sizing: border-box;
  }

  .mg-t-#{$i} {
    margin-top: #{$i}px;
    box-sizing: border-box;
  }

  .mg-b-#{$i} {
    margin-bottom: #{$i}px;
    box-sizing: border-box;
  }
}

.no-margin {
  margin: 0 !important;
}

.no-padding {
  padding: 0 !important;
}

/* X方向居中 */
.mg-x-auto {
  margin: 0 auto;
}

/* 字体加粗 */
.fwb {
  font-weight: bold;
}

/* 字体对齐方式 */
.tal {
  text-align: left;
}

.tac {
  text-align: center;
}

.tar {
  text-align: right;
}

/* 下划线 */
.tdu {
  text-decoration: underline;
}

/* 删除线 */
.tdlt {
  text-decoration: line-through;
}

/* 文字超长省略 */
.toell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 定位 */
.pos-rel {
  position: relative;
}

/* 定位 */
.pos-abs {
  position: absolute;
}

/* 固定定位 */
.pos-fix {
  position: fixed;
}

/* 吸顶 */
.pos-sti {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
}

/* 定位位置 */
@for $i from 0 through 200 {
  .top-#{$i} {
    top: #{$i}px;
  }

  .right-#{$i} {
    right: #{$i}px;
  }

  .bottom-#{$i} {
    bottom: #{$i}px;
  }

  .left-#{$i} {
    left: #{$i}px;
  }
}

/* 下边框 */
.border-b {
  position: relative;
  &:after {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    content: "";
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
    background-color: #c8c7cc;
  }
}

/* 下边框 */
.border-all {
  border: 1px solid #eeeeef;
}

/* 右边框 */
.border-r {
  border-right: 1px solid #eeeeef;
}

.border-circle {
  border-radius: 50%;
}

/* 黑色背景占位 */
.bgb {
  background: black;
}

/* 链接 */
.link {
  cursor: pointer;
}

.link:hover {
  text-decoration: underline;
}

.img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cp {
  cursor: pointer;
}

.full{
  width: 100%;
  height: 100%;
}

.w-full{
  width: 100%;
}

.h-full{
  height: 100%;
}

/* 颜色配置 */
$app-colors: (
  "fff": #fff,
  "333": #333,
  "999": #999,
  "main": $color-primary,
  "primary": #3978f7,
  "danger": #f56c6c,
  "warning": #e6a23c,
  "success": #67c23a,
  "info": #909399,
);

@each $colorKey, $color in $app-colors {
  .t-color-#{$colorKey} {
    color: $color;
  }
  .bg-#{$colorKey} {
    background-color: $color;
  }
}
